<template>
  <div>
    <div class="tou">
      <div class="logo">
        <span>小茶书平台</span>
        <span class="left_top"></span>
      </div>
      <slot name="conter"></slot>
      <div>
        <ul v-if="!userInfo" class="biao">
          <a href="http://localhost:8081/login" class="night">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            登录
          </a>
        </ul>
        <div style="display: flex;align-items: center;" v-else>
          <p style="margin-right: 20px;color:#ffffff;">{{userInfo.nickname}}</p>
          <el-image
                  style="width: 50px; height: 50px;border-radius:50%"
                  :src="userInfo.avatar"
                  fit="contain"></el-image>

        </div>
      </div>
    </div>
    <div style="height: 101px"></div>
    <div class="context">
      <el-row class="tac context_left">
        <el-col :span="12">
          <el-menu
                  default-active="2"
                  class="el-menu-vertical-demo"
                  background-color="#545c64"
                  text-color="#fff"
                  active-text-color="#ffd04b">
            <el-submenu index="1-1">
              <template slot="title">
                <i class="el-icon-location"></i>
                <span>拍卖系列</span>
              </template>
              <el-menu-item-group>
                <template slot="title">专场</template>
                <el-menu-item index="1-1" @click="JumpClick('/home')">拍卖专场</el-menu-item>
              </el-menu-item-group>
              <el-menu-item-group index="1-3" title="添加系列">
                <template slot="title">添加列表</template>
                <el-menu-item index="1-4-1" @click="JumpClick('/home/create')">添加拍品</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
            <el-submenu v-if="userInfo" index="1-2">
              <template slot="title">
                <i class="el-icon-chat-line-round"></i>
                <span>聊天系列</span>
              </template>
              <el-menu-item-group>
                <template slot="title">专场</template>
                <el-menu-item index="1-1" @click="JumpClick('/chat')">在线聊天</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
            <el-menu-item style="padding: 0" v-if="userInfo" @click="delUserInfo()">
              <i class="el-icon-switch-button"></i>
              <span>退出登录</span>
            </el-menu-item>
            <slot name="nav-menu"></slot>
          </el-menu>
        </el-col>
      </el-row>
      <div class="context_right">
        <slot name="context"></slot>
      </div>
    </div>

  </div>
</template>

<script>
  export default {
    name: "Home",
    methods: {
      JumpClick(url) {
        this.$router.push(url).catch(err => {
        })
      },
      delUserInfo() {
        console.log("---");
        this.userInfo = null
        this.$store.commit('delUserInfo')
      }
    },
    data() {
      return {
        is_scroll: true,
        userInfo: null
      }
    },
    created() {

      let users = this.$store.state.userInfo
      this.userInfo = users
    },
    mounted() {
      let that = this
      window.addEventListener('scroll', function () {

        let tou = document.querySelector('.tou');
        let el_col = document.querySelector('.el-col');

        if (window.scrollY > 0) {
          if (!that.is_scroll) {
            return
          }
          tou.classList.add("bian");
          el_col.classList.remove('el-col-12')
          el_col.classList.add('t1')
          that.is_scroll = false

        } else {
          el_col.classList.remove('t1')
          el_col.classList.add('el-col-12')
          tou.classList.remove("bian");
          that.is_scroll = true

        }
      })
    }
  }
</script>

<style scoped>
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;

  }

  .t1 {
    position: fixed;
    left: 0;
    top: 80px;
    width: 201px;
    transition: 0.5s;
  }

  .el-col-12 {
    position: fixed;
    left: 0;
    top: 100px;
    width: 201px;
    transition: 0.5s;
  }

  .context {
    display: flex;
  }

  .context .context_left {
    width: 200px;
  }

  .context_left {
    display: flex;
    text-align: center;
    flex-direction: column;
  }

  .context_left a:first-child {
    margin-top: 5px;
  }

  .context_left a {
    margin-bottom: 5px;
    color: #000000;
  }

  .context_left a:hover {
    color: #cccccc;
  }

  .context .context_right {
    flex: 9;
    width: 100%;
  }

  .tou {
    position: fixed;
    top: 0;
    left: 0;
    padding: 25px 100px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: rgba(4, 4, 19, 0.5);
    transition: 0.5s;
  }

  .logo {
    position: relative;
    font-size: 22px;
    font-weight: 900;
    letter-spacing: 1px;
    color: rgb(28, 36, 148);
  }


  .biao {
    position: relative;
    display: flex;
    justify-content: center;
    align-content: center;
    list-style: none;

  }

  .biao li {
    position: relative;
  }

  .biao a {
    position: relative;
    margin: 0 10px;
    font-size: 18px;
    font-family: 'fangsong';
    font-weight: bold;
    /*color: #F5F5DC;*/
    text-decoration: none;
    text-transform: uppercase;
    text-align: center;
    transition: all 0.4s;


  }

  .biao li a:hover {
    font-size: 22px;
    transition: all 0.4s;
  }

  .bian {
    padding: 15px 50px;
    background-color: #63c1ff;
    z-index: 10000;
  }

  .bian .logo, .tou.bian a {
    color: rgb(252, 247, 247);
  }

  /*  背景图样式 */
  .bjimg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    min-width: 1000px;
    z-index: -10;
    zoom: 1;
    background-color: #fff;
    /*background-image: url(../static/2.jpg);*/
    background-repeat: no-repeat;
    background-size: cover;
    -webkit-background-size: cover;
    -o-background-size: cover;
    background-position: center 0;
  }

  .left_top {
    font-size: 16px;
    margin-left: 30px;

  }

  .left_top a {
    color: #9400D3;
    text-decoration: none;
    transition: all 0.4s;
  }

  .left_top a:hover {
    font-size: 22px;
    transition: all 0.4s;
  }

  .topaa {
    font-size: 40px;
    text-align: center;
    transition: 1s;
  }

  .topaa a {
    text-decoration: none;
  }

  .topaa::before {
    content: "";
    display: block;
    position: absolute;
    top: 62px;
    left: 0;
    right: 0;
    margin: auto;
    width: 300px;
    height: 0px;
    background: rgba(0, 0, 0, 0.527);
    z-index: 1000;
    transition: 0.4s .5s;
    background-image: url("https://wx-1304867879.cos.ap-guangzhou.myqcloud.com/1ccb7469d76d17be.jpg");
    box-shadow: -1px 10px 10px rgba(0, 0, 0, 0.4);

  }

  .topaa:hover::before {
    height: 300px;
  }

  .topaa::after {
    font-weight: 900;
    /*text-align: center;*/
    margin-top: 15px;
    content: attr(data-attr);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    /*text-align: center;*/
    color: transparent;
    transition: all 0.4s;
    /*background-clip: text;*/
    -webkit-background-clip: text;
    background-image: linear-gradient(
            to right,
            rgb(201, 22, 156),
            rgb(177, 2, 177),
            rgb(36, 127, 230),
            rgb(47, 49, 146),
            rgb(62, 45, 138),
            rgb(165, 50, 194),
            rgb(145, 21, 247),
            rgb(221, 19, 160)
    );
    clip-path: circle(6% at 50% 55%);
    animation: move 6s infinite ease-in-out;
  }

  .bian .topaa:after {
    margin-top: 5px;
    transition: all 0.4s;
  }

  .bian .topaa h2 {
    margin-top: 10px;
    transition: all 0.4s;
  }

  .topaa h2 {
    /*margin-top: 10px;*/
    font-weight: 900;
    margin-top: 20px;
    width: 200px;
    /*text-align: center;*/
    position: absolute;
    top: 0;
    left: calc(50% - 100px);
    right: 0;
    color: #381d1d;
    transition: 0.4s;
    /*font-weight: 900;*/
    font-size: 40px;
  }

  @keyframes move {
    0% {
      clip-path: circle(6% at 36% 55%);
    }
    50% {
      clip-path: circle(6% at 65% 55%);
    }
    100% {
      clip-path: circle(6% at 36% 55%);
    }
  }

  .night {
    position: relative;
    width: 100px;
    height: 50px;
    border-radius: 10px;
    color: rgb(18, 190, 243);
    letter-spacing: 12px;
    font-size: 20px;
    line-height: 50px;
    text-align: center;
    /* background-color: rgb(31, 49, 133); */
    background-image: linear-gradient(90deg, rgb(40, 62, 161) 50%, rgb(31, 49, 133) 50%);
    text-transform: uppercase;
    user-select: none;
    text-decoration: none;
    overflow: hidden;
    box-shadow: inset 0 0 10px rgb(14, 20, 105),
    0 0 5px rgb(9, 208, 235);
    transition: all 0.5s;

  }

  .night:hover {
    text-shadow: 0 0 5px rgb(18, 190, 243),
    0 0 8px rgb(18, 190, 243),
    0 0 10px rgb(18, 190, 243);
    background-image: linear-gradient(90deg, rgb(25, 38, 99) 50%, rgb(13, 22, 58) 50%);
    box-shadow: inset 0 0 10px rgb(14, 20, 105),
    0 0 5px rgb(9, 208, 235),
    0 0 10px rgb(9, 208, 235);
  }

  .night span {
    position: absolute;
  }

  .night span:nth-child(1) {
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background-image: linear-gradient(to right, transparent, rgb(0, 153, 255));
    animation: move1 2s linear infinite;
  }

  @keyframes move1 {
    0% {
      transform: translateX(-100%);
    }
    100% {
      transform: translateX(100%);
    }
  }

  .night span:nth-child(2) {
    top: 0;
    right: 0;
    width: 2px;
    height: 100%;
    transform: translateY(-100%);
    background-image: linear-gradient(to bottom, transparent, rgb(0, 153, 255));
    animation: move2 2s linear infinite;
    animation-delay: 1s;
  }

  @keyframes move2 {

    100% {
      transform: translateY(100%);
    }
  }

  .night span:nth-child(3) {
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background-image: linear-gradient(to left, transparent, rgb(0, 153, 255));
    animation: move3 2s linear infinite;
  }

  @keyframes move3 {
    0% {
      transform: translateX(100%);
    }
    100% {
      transform: translateX(-100%);
    }
  }

  .night span:nth-child(4) {
    top: 0;
    left: 0;
    width: 2px;
    height: 100%;
    transform: translateY(100%);
    background-image: linear-gradient(to top, transparent, rgb(0, 153, 255));
    animation: move4 2s linear infinite;
    animation-delay: 1s;
  }

  @keyframes move4 {
    100% {
      transform: translateY(-100%);
    }
  }
</style>